<template>
  <detailSlot :upInfo="upInfo">
    <!-- 音频详情模块 -->
    <detailModule :audioInfo="audioInfo" />
    <!-- 评论模块 -->
    <template #comment>
      <replyModule :aid="aid" />
    </template>
    <!-- 相关推荐 -->
    <template #recommend>
      <!-- <videoCard :key="temp" v-for="temp in 10" /> -->
      <videoCard :archive="archive" :key="archive.aid" :type="archiveType" v-for="archive in aboutArchive" />
    </template>
  </detailSlot>
</template>

<script>
import detailSlot from '@/components/detailSlot/index.vue';
import videoCard from '@/components/videoCard.vue';
import replyModule from '@/components/replyModule/index.vue';
import detailModule from './components/detailModule.vue';
import { getArchiveDetailAPI, getArchivesByRandomAPI } from '@/api/archive';

export default {
    components: {
        detailSlot,
        detailModule,
        videoCard,
        replyModule,
    },
    data() {
        return {
            archiveType: 2,
            audioInfo: {},
            aboutArchive: [],
        };
    },
    computed: {
        aid() {
            try {
                const { aid } = this.$route.params;
                return atob(aid);
            } catch (error) {
                return 0;
            }
        },
        upInfo() {
            return this.audioInfo.author;
        },
    },
    created() {
        this.getDeatilData();
        this.getArchivesByRandom();
    },
    methods: {
        async getDeatilData() {
            try {
                const { data } = await getArchiveDetailAPI(this.aid);
                this.audioInfo = data;
            } catch (error) {
                console.error('合辑详情获取失败', error);
            }
        },
        async getArchivesByRandom() {
            const { data } = await getArchivesByRandomAPI(this.archiveType, 10);
            this.aboutArchive = data;
        },
    },
};
</script>
